<template>
  <div class="container">
    <el-card>
      <!-- 第一部分搜索列表 -->
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-row type="flex" justify="space-between">
          <el-col :span="22">
            <el-form-item label="关键字">
              <el-input
                size="small"
                v-model="formInline.keyword"
                placeholder="根据文章标题搜索"
              ></el-input>
            </el-form-item>

            <el-form-item label="状态">
              <el-select
                v-model="formInline.state"
                placeholder="请选择"
                size="small"
              >
                <el-option label="启用" value="1"></el-option>
                <el-option label="禁用" value="0"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button size="small" @click="resetSearch"> 清除</el-button>
              <el-button type="primary" @click="searchArticle" size="small"
                >搜索</el-button
              >
            </el-form-item>
          </el-col>
          <el-col :span="2">
            <el-form-item>
              <el-button
                type="success"
                icon="el-icon-edit"
                size="small"
                @click="showPrewVisitDialog = true"
                >新增技巧</el-button
              >
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <!-- 数据一共10条 -->
      <el-alert
        type="info"
        :closable="false"
        show-icon
        style="margin: 0 0 15px"
        :title="`数据一共${total}条`"
      >
      </el-alert>
      <!-- 新增技巧弹层 -->
      <!-- 获取文章列表 -->
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="id" label="序号" width="80"> </el-table-column>
        <el-table-column prop="title" label="文章标题" width="400">
        </el-table-column>
        <el-table-column prop="visits" label="阅读数" width="290">
        </el-table-column>
        <el-table-column prop="username" label="录入人" width="300">
        </el-table-column>
        <el-table-column prop="createTime" label="录入时间" width="300">
          <template slot-scope="{ row }">
            <span>{{ getQueryObject(row.createTime) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="state" label="状态" width="100">
          <template slot-scope="{ row }">
            <span>{{ row.state === 1 ? "已启用" : "已禁用" }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="action" label="操作" width="170">
          <template slot-scope="{ row }">
            <el-button type="text" @click="visitArticles(row.id)"
              >预览</el-button
            >
            <el-button type="text" @click="changeState(row.id)">{{
              row.state ? "禁用" : "启用"
            }}</el-button>

            <el-button
              type="text"
              @click="updateArticle(row.id)"
              :disabled="row.state !== 1"
              >修改</el-button
            >
            <el-button
              type="text"
              @click="delArticle(row.id)"
              :disabled="row.state !== 1"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-row type="flex" justify="end" class="page" style="margin: 20px 0 0">
        <el-col :span="7">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageList.page"
            :page-sizes="[10, 20, 50]"
            :page-size="pageList.pagesize"
            layout=" prev, pager, next, sizes, jumper"
            :total="total"
          >
          </el-pagination>
        </el-col>
      </el-row>

      <!-- 预览弹层 -->
      <el-dialog
        ref="diavisitArticles"
        title="预览文章"
        :visible="dialogFormvisitArticles"
        @close="articleDiacancel"
      >
        <h3>{{ prewvisit.title }}</h3>
        <span class="one">{{ prewvisit.createTime }}</span
        ><span>{{ prewvisit.username }}</span>
        <i class="el-icon-view"></i>&nbsp;<span>{{ prewvisit.visits }}</span>
        <div class="articleBody" v-html="prewvisit.articleBody"></div>
      </el-dialog>
      <ArticlesAdd
        :showPrewVisitDialog.sync="showPrewVisitDialog"
        :addArticleForm="update"
        @updateList="updateList"
      />
    </el-card>
  </div>
</template>
<script>
import { list, changeState, detail, remove } from '../../api/hmmm/articles'
import ArticlesAdd from '../components/articles-add.vue'
export default {
  components: { ArticlesAdd },
  data() {
    return {
      total: 0,
      // 分页效果
      pageList: {
        pagesize: 10,
        page: 1
      },
      update: {},
      showDialog: false,
      prewvisit: {},
      // api文章列表list
      list: [],
      // 最上层的搜索列表
      formInline: {
        state: null,
        keyword: ''
      },
      options: [
        {
          value: '选项1',
          label: '启用'
        },
        {
          value: '选项2',
          label: '禁用',
          disabled: true
        }
      ],
      value: '',
      // 新增技巧弹层表单
      dialogFormVisible: false,
      // 预览文章弹层数据
      showPrewVisitDialog: false,
      formLabelWidth: '120px',
      // 文章列表页面数据
      tableData: [],
      dialogFormvisitArticles: false
    }
  },
  created() {
    this.getList()
  },

  methods: {
    onSearch() {
      console.log('submit!')
    },
    // 获取文章列表
    async getList(data = this.pageList) {
      const res = await list(data)
      this.total = res.data.counts
      this.tableData = res.data.items
    },
    async visitArticles(id) {
      const res = await list()
      const data = res.data.items
      data.forEach((item) => {
        if (item.id === id) {
          this.prewvisit = item
        }
      })
      this.dialogFormvisitArticles = true
    },
    articleDiacancel() {
      this.dialogFormvisitArticles = false
    },
    // 修改禁用和启用
    async changeState(id) {
      let data = {}
      this.tableData.forEach((item) => {
        if (item.id === id) {
          item.state = item.state === 0 ? 1 : 0
          data = item
        }
      })
      await changeState(data)
      await this.getList()
    },

    async updateArticle(id) {
      const res = await detail({ id })
      console.log(res)
      this.update = res.data
      this.showPrewVisitDialog = true
    },
    updateList() {
      this.getList()
    },
    // 删除文章
    async delArticle(id) {
      this.$confirm('您是否确定要删除当前文章吗')
        .then(async () => {
          return await remove({ id: id })
        })
        .then(() => {
          this.getList()
          this.$message.success('删除部门成功')
        })
    },
    // 搜索文章
    searchArticle() {
      console.log(this.formInline.state)
      if (this.formInline.keyword === '') {
        return
      }
      this.getList({ ...this.pageList, ...this.formInline })
    },
    // 重置
    resetSearch() {
      this.formInline = {
        state: null,
        keyword: ''
      }
      this.getList()
    },
    // 处理时间格式
    getQueryObject(data) {
      return data.replace(/T|.000Z/g, ' ')
    },
    //  分页
    async handleSizeChange(val) {
      this.pageList.pagesize = val
      const res = await list({ page: this.pageList.page, pagesize: val })
      this.articlesList = res.data.items
    },
    async handleCurrentChange(val) {
      this.pageList.page = val
      const res = await list({ page: val, pagesize: this.pageList.pagesize })
      this.articlesList = res.data.items
    }
  }
}
</script>

<style scoped >
.container {
  margin: 20px 20px;
  background-color: #fff;
}
.articleBody {
  background-color: white;
}
.el-dialog span {
  padding: 0 10px;
}
.el-dialog .one {
  padding-right: 10px;
}
</style>
